<template>
    <div style="position: relative;">
        <!-- 导航 -->
        <van-nav-bar title="资讯">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item @click="$router.push({ path: '/details', query: { id: item.id } })">
                <img src="../../assets/shop/4.webp" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../../assets/shop/5.webp" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../../assets/shop/6.webp" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../../assets/shop/12.webp" alt="">
            </van-swipe-item>
        </van-swipe>
        <div class="zhezhao">
            <p>什么季节吃羊肉最好！</p>
        </div>

        <!-- 分类推荐 -->
        <van-sidebar>
            <van-sidebar-item title="热门话题" />
        </van-sidebar>

        <van-row>
            <van-col
             v-for="itema in topics" :key="itema.id" span="10" style="margin: 0px 10px;" @click="$router.push({ path: '/one', query: { id: itema.id } })">
                <img class="imgs" :src=" itema.images " alt="">
                <b class="b1">#{{ itema.title }}#</b>
                <b class="b2">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ itema.labels }}
                </b>
            </van-col>
        </van-row>

        <div class="div-footer">
            <van-sidebar>
                <van-sidebar-item title="为你推荐" />
            </van-sidebar>
            <van-row class="one">
                <van-col v-for="item in topicxs" :key="item.ida" span="10" style="margin: 0px 10px;" @click="$router.push({ path: '/one', query: { id: item.ida } })">
                <img :src="item.imagesone" alt="">
                    <span style="font-size: 19px;opacity: 0.6;">#{{ item.title }}</span>
                </van-col>
            </van-row>
        </div>
        <!-- <van-row>
            <van-col span="10" style="margin: 0px 10px;" class="span1" @click="$router.push('/five')">
                <img src="../../assets/shop/16.webp" alt="">
                <p>#咸蛋蛋黄酥到底<br>&nbsp;&nbsp;&nbsp;<span style="margin-top: -46px;">有多好吃？</span></p>
            </van-col>
            <van-col span="10" style="margin: 0px 10px;" class="span1" @click="$router.push('/six')">
                <img src="../../assets/shop/17.webp" alt="">
                <p>#这是什么好吃的？</p>
            </van-col>
        </van-row> -->
    </div>
</template>
  
<script setup>
import myaxios from "@/http/MyAxios";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const id = ref(route.query.id);

// 热门话题
const topics = ref();
onMounted(() => {
    let url = "http://127.0.0.1:5000/topic?id=" + id.value;
    myaxios.get(url).then((res) => {
        console.log("热门话题查询列表", res);
        topics.value = res.data.data
    });
});

// 为你推荐
const topicxs = ref();
const ida = ref(route.query.id);
onMounted(()=>{
    let url = 'http://127.0.0.1:5000/topic/topicx?id=' + ida.value
    myaxios.get(url).then((res)=>{
        console.log('为你推荐列表',res)
        topicxs.value = res.data.data
    })
})
</script>

<style lang="scss" scoped>
.van-swipe {
    height: 250px;
    line-height: 250px;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 250px;
    text-align: center;
}

img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

b {
    position: absolute;
    // top: 46%;
    color: #fff;
    margin-left: 15px;
    font-size: 18px;
    font-weight: bold;
    opacity: 0.9;
}
.b1{
    top: 28%;
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.b2{
    top: 30%;
}
.div-footer{
    // position: relative;
    .one {
        font-size: 18px;
        font-weight: bold;
        span{
            opacity: 0.3;
            text-align: center;
            margin-left: 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            // position: absolute;
            // top: 20%;
            // left: 20%;
            // transform: translate(-20% -20%);
        }
    }
}


.van-col p {
    position: absolute;
    top: 88%;
    color: #ddd;
    margin-left: 15px;
    font-size: 18px;
    font-weight: bold;opacity: 0.9;
}

.zhezhao {
    width: 100%;
    height: 50px;
    background-color: black;
    opacity: 0.4;
    position: absolute;
    bottom: 0;
    top: 15.6%;
}

p {
    font-size: 20px;
    line-height: 50px;
    margin-left: 18px;
    color: white;
}

.van-sidebar {
    margin: 15px 10px;
}

.van-sidebar-item {
    font-size: 16px;
    width: 300px;
}

.van-row img {
    width: 168px;
    padding: 5px;
    object-fit: cover;
    height: 150px;
}
</style>